<template>
 <div>
   vuex映射
   <div>a:{{a}}</div>
   <input type='button' value='+5' @click="addA(5)"/>
   <div>b:{{b}}</div>
   <input type='button' value='+3' @click="addB(3)"/>
   a:{{count}}
   <!-- <input type='button' value='+5' @click="fn()"/> -->
   <input type='button' value='+5' @click="count+=5"/>
   <br>
   str:{{$store.state.mode_a.str}}
   str:{{str_a}}

 </div>
</template>

<script>
 import {mapState,mapActions,mapGetters} from 'vuex';
 export default {
   name:'HelloWorld',
   data () {
     return {

     }
   },
   created(){
     console.log(mapState(['a','b']))
   },
   methods: {
     ...mapActions(['addA','addB']),
     fn(){
      //  直接这样写能添加但是会报错
      //  this.$store.state.a+=5;
      // this.$store.commit('mutationName',args) 一般不这样写 一般用actions操作mutation
      //  this.$store.commit('add',5)
      // 最常用操作vuex数据的方法 this.$store.dispatch('actionName',args)
      this.$store.dispatch('add',5)

     }
   },
   components: {

   },
  //  计算属性
  computed: {
    ...mapState(['a','b']),
    ...mapGetters(['count']),
    ...mapState({
      str_a:state=>state.mode_a.str
    })
    // count:{
    //   get(){
    //     return this.$store.getters.count;
    //   },
    //   set(value){
    //     this.$store.dispatch('set_a',value-5)
    //     this.$store.dispatch('set_b',5)
    //   }
    // }
  },
 }
</script>

<style scoped>

 
</style>
